[코담]
웹개발·실전 프로젝트·AI까지, 파이썬·장고의 모든것을 담아낸 강의와 개발 노트
책 목록 웹앱 만들기4 이미지추가 | ✅저자: 이유정(박사)
🔹 간단한 책 제목과 저자를 저장하고, 화면에 예쁘게 출력하는 웹앱
bookproject/
├── manage.py
├── bookproject/
│ └── settings.py, urls.py ...
├── templates/ ← ✔️ 이동됨 (프로젝트 공용 templates 디렉토리)
│ └── books/
│ ├── base.html
│ ├── book_list.html
│ ├── book_detail.html
│ ├── book_form.html
│ ├── book_confirm_delete.html
│ └── book_results.html
├── static/ ← ✔️ 이동됨 (프로젝트 공용 static 디렉토리)
│ └── books/
│ └── css/
│ └── style.css
│ └── images/ ← ✔️ 이미지 저장 디렉토리 추가
│ ├── background.jpg ← ✔️ 배경 이미지
│ ├── add.png ← ✔️ 추가 아이콘
│ ├── edit.png ← ✔️ 수정 아이콘
│ └── delete.png ← ✔️ 삭제 아이콘
└── books/
├── models.py
├── views.py
├── urls.py
settings.py STATIC 설정
STATICFILES_DIRS와 TEMPLATES['DIRS'] 경로를 아래와 같이 추가 설정:
import os
BASE_DIR = Path(__file__).resolve().parent.parent
# 정적 파일
STATIC_URL = "static/"
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"), # ✔️ 외부 static 디렉토리 지정
]
# 템플릿 설정
TEMPLATES = [
{
...
'DIRS': [os.path.join(BASE_DIR, "templates")], # ✔️ 외부 templates 디렉토리 지정
'APP_DIRS': True,
...
},
]
템플릿 – books/templates/books/base.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>{% block title %}Book List{% endblock %}</title>
<link rel="stylesheet" href="{% static 'books/css/style.css' %}">
</head>
<body>
<div class="container">
{% block content %}{% endblock %}
</div>
</body>
</html>
템플릿 – books/templates/books/book_list.html
🔹 아이콘 이미지 버튼으로 변경
{% extends "books/base.html" %}
{% block title %}책 목록{% endblock %}
{% block content %}
<h1>책 목록</h1>
<a href="{% url 'books:book_add' %}" class="icon-button">
<img src="{% static 'books/images/add.png' %}" alt="Add"> 새 책 추가
</a>
<ul class="book-list">
{% for book in books %}
<li>
<a href="{% url 'books:book_detail' book.id %}">{{ book.title }}</a> by {{ book.author }}
|
<a href="{% url 'books:book_edit' book.id %}" class="icon-button">
<img src="{% static 'books/images/edit.png' %}" alt="Edit"> 수정
</a>
<a href="{% url 'books:book_delete' book.id %}" class="icon-button">
<img src="{% static 'books/images/delete.png' %}" alt="Delete"> 삭제
</a>
</li>
{% endfor %}
</ul>
{% endblock %}
🔹 템플릿 – book_form.html 이미지추가
{% extends "books/base.html" %}
{% block title %}책 정보 작성{% endblock %}
{% block content %}
<h2>책 정보 작성</h2>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="icon-button"> ==<!--버튼수정-->==
<img src="{% static 'books/images/save.png' %}" alt="Save">저장
</button>
</form>
<a href="{% url 'books:book_list' %}">← 목록으로 돌아가기</a>
{% endblock %}
🔹 CSS – books/static/books/css/style.css 수정
body {
font-family: 'Arial', sans-serif;
background: url("../images/background.jpg") no-repeat center center fixed;
background-size: cover;
margin: 2rem;
}
.container {
background: rgba(255, 255, 255, 0.9); /* 반투명 흰 배경 */
border-radius: 10px;
padding: 2rem;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #4a4a4a;
}
.book-list {
list-style-type: none;
padding: 0;
}
.book-list li {
padding: 8px 0;
border-bottom: 1px solid #ddd;
}
python manage.py runserver
Python 코드 실행기
